<template>
<div>
  <div ref="manyBarDiv" style="width: 600px;height:400px;"></div>
  <div style="width: 300px;height: 200px;border: 1px #000 solid;line-height: 30px;margin-left: 600px;margin-top: 50px">
    <h5>查询销售统计信息</h5>
    销售年份: <el-select v-model="customer" placeholder="请选择类别" size="large" >
    <el-option label="戴尔" value="gz">戴尔</el-option>
    <el-option label="惠普" value="dz">惠普</el-option>
    <el-option label="神州" value="bk">神州</el-option>
  </el-select>
    <el-button type="success">查询</el-button>
  </div>
</div>

</template>

<script>
import * as echarts from 'echarts';
import app from "@/App";
export default {
name: "countMonthSell",
data(){
    return{
      productType:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      sellNum: [5, 20, 36, 10, 10, 20],
      gradeList: [
        { value: 5, name: '90以上' },
        { value: 4, name: '80-90' },
        { value: 12, name: '60-80' },
        { value: 6, name: '60以下' }
      ]
        }
    },
  methods:{
    createManyBar() {
      var manyBarChart = echarts.init(this.$refs.manyBarDiv);

      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['食品类', '酒类', '药品类', '图书类']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['2012', '2013', '2014', '2015']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '食品类',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [2000, 1500, 1800, 2300]
          },
          {
            name: '酒类',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [500, 290, 328, 459]
          },
          {
            name: '药品类',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [1400, 1300, 1280, 1340]
          },
          {
            name: '图书类',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [985, 810, 768, 840]
          }
        ]
      };
      manyBarChart.setOption(option);
    }
},
  mounted() {

    this.createManyBar();
  }
}
</script>

<style scoped>

</style>